<template>
  <div id="search">

    <div style="margin-top: 100px;margin-bottom: 50px;justify-content: center;display: flex ;">
      <searchMusic_Input></searchMusic_Input>
    </div>

    <Table :columns="columns"
           :data="songData"
           @on-row-dblclick="userRoot"></Table>

    <div style="margin-bottom: 20px;margin-top: 20px;">
      <Page :total="total"
            :page-size="pageSize"
            :current="current"
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange" />
    </div>
  </div>
</template>

<script>
import api from '@/api/apis/musicAPI.js'

export default {
  data() {
    return {
      total: 0,
      pageSize: 10,
      current: 1,
      columns: [
        {
          title: ' ',
          key: 'picUrl',
          width: 120,
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.picUrl,
              },
              style: {
                width: '100px',
                height: '100px',
                padding: '10px',
              },
            })
          },
        },
        {
          title: '名称',
          key: 'songName',
          width: 350,
          render: (h, params) => {
            // 假设你的 Tag 组件接收 checkable 和 color 属性
            // 以及一个默认插槽来显示文本
            const tagProps = {
              checkable: true, // 根据需要设置
              color: params.row.originTypeColor, // 设置颜色
            }

            // 注意：这里假设 Tag 组件已经全局注册或局部注册在当前组件中
            const tagVNode = h(
              'Tag',
              {
                props: tagProps, // 传递 props
                // 如果需要事件监听，可以在这里添加，比如 on: { click: handleClick }
              },
              params.row.originType
            ) // 传递插槽内容

            const h2Props = {}

            const h2VNode = h(
              'H2',
              {
                props: h2Props, // 传递 props
                // 如果需要事件监听，可以在这里添加，比如 on: { click: handleClick }
              },
              params.row.songName
            ) // 传递插槽内容

            // 返回虚拟节点，可以是数组包含多个虚拟节点
            if (params.row.originType != null) {
              return h('div', [h2VNode, tagVNode])
            } else {
              return h('div', [h2VNode])
            }
          },
        },
        {
          title: 'artist',
          key: 'artistStr',
          tooltip: 'true',
          className: 'demo-table-info-column',
        },
        {
          title: '时长',
          key: 'songTimeStr',
        },
      ],
      songData: [],
    }
  },

  // 在目标组件中接收参数
  created() {
    const value = this.$route.query.search
    this.search(value)
  },

  mounted() {},

  methods: {
    //页码切换事件
    tabClick() {
      this.current = 1
      this.search()
    },
    //页码变更
    pageChange(current) {
      this.current = current
      this.search()
    },
    //切换每页条数
    pageSizeChange(size) {
      this.pageSize = size
      this.search()
    },

    //获取歌单所有歌曲
    search(keyword) {
      api.search(this.pageSize, this.current, keyword).then((res) => {
        this.songData = res.data.data.result
        this.total = res.data.data.total
      })
    },
    //用户点击
    userRoot(row) {
      this.$router.push({ name: 'audio', params: { paramName: row } })
    },
  },
}
</script>

<style scoped>
#search {
  width: 1200px;
  margin: 0 auto;
}

.ivu-table .demo-table-info-row td {
  background-color: #2db7f5;
  color: red;
}
</style>